<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
    <h2>天气网</h2>
    <input type="text" id="ipt" placeholder="请输入要查询的城市天气">
    <div class="city">城市：<span id="city"></span></div>
    <div class="wen">温度：<span id="wen"></span>℃</div>
    <div class="now">天气：<span id="now"></span></div>
    <div class="aaa">风向：<span id="aaa"></span></div>
    <div class="zi">紫外线指数：<br><span id="c-1"></span><span id="d-1"></span></div>
    <div class="jian">减肥指数：<br><span id="c-2"></span><span id="d-2"></span></div>
    <div class="xue">血糖指数：<br><span id="c-3"></span><span id="d-3"></span></div>
    <div class="chuan">穿衣指数：<br><span id="c-4"></span><span id="d-4"></span></div>
    <div class="che">洗车指数：<br><span id="c-5"></span><span id="d-5"></span></div>
    <div class="kong">空气污染指数：<br><span id="c-6"></span><span id="d-6"></span></div>
</div>
<script>
    var city = '泊头';

    function loadXMLDoc() {
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        }
        else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var json = xmlhttp.responseText;
                json = JSON.parse(json);
                console.log(json);
                document.querySelector("#city").innerHTML = json.basic.city;
                document.querySelector("#now").innerHTML = json.now.cond.txt;
                document.querySelector("#aaa").innerHTML = json.now.wind.dir;
                document.querySelector("#wen").innerHTML = json.now.fl;
                document.querySelector("#c-1").innerHTML = json.suggestion.air.brf;
                document.querySelector("#d-1").innerHTML = json.suggestion.air.txt;
                document.querySelector("#c-2").innerHTML = json.suggestion.comf.brf;
                document.querySelector("#d-2").innerHTML = json.suggestion.comf.txt;
                document.querySelector("#c-3").innerHTML = json.suggestion.cw.brf;
                document.querySelector("#d-3").innerHTML = json.suggestion.cw.txt;
                document.querySelector("#c-4").innerHTML = json.suggestion.drsg.brf;
                document.querySelector("#d-4").innerHTML = json.suggestion.drsg.txt;
                document.querySelector("#c-5").innerHTML = json.suggestion.trav.brf;
                document.querySelector("#d-5").innerHTML = json.suggestion.trav.txt;
                document.querySelector("#c-6").innerHTML = json.suggestion.uv.brf;
                document.querySelector("#d-6").innerHTML = json.suggestion.uv.txt;
            }
        }
        xmlhttp.open("GET", "https://bird.ioliu.cn/weather?city=" + city, true);
        xmlhttp.send();
    }

    loadXMLDoc()

    document.querySelector("#ipt").addEventListener('change', function () {
        //赋值城市
        city = this.value;
        //执行查询天气的方法
        loadXMLDoc();
    })
</script>
</body>
</html>